<template>
  <el-row v-show="step === 2" class="step3">
    <el-col :span="24">
      <div v-loading="loading" class="crud-wrapper">
        <div class="table-wrapper">
          <div class="group">
            <div class="head-container">
              <el-input
                v-model="name"
                :placeholder="$t('equipment.groupingInput')"
                clearable
                size="small"
                prefix-icon="el-icon-search"
                style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                ref="dtree"
                :data="groupOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                default-expand-all
                @node-click="handleNodeClick"
              >
                <div slot-scope="{ node, data }" class="el-tree-node__label custom-tree-node custom-tree-item">
                  {{ data.name }}
                </div>
              </el-tree>
            </div>
          </div>
          <div class="right-wrap">
            <div class="search">
              <!-- <el-form ref="form" :model="params"> -->
              <el-row :gutter="10">
                <el-col :span="6">
                  <!-- <el-form-item prop="name"> -->
                  <el-input v-model="params.name" size="small" :placeholder="$t('equipment.nameInput')" />
                  <!-- </el-form-item> -->
                </el-col>
                <el-col :span="12">
                  <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
                  <el-button size="small" @click="handleClear">清空</el-button>
                  <el-tooltip class="item" effect="dark" :content="$t('elButton.refresh')" placement="top">
                    <el-button size="small" circle icon="el-icon-refresh" @click="refresh()" />
                  </el-tooltip>
                </el-col>
              </el-row>
              <!-- </el-form> -->
            </div>
            <el-table
              ref="deviceTable"
              :data="deviceList"
              :border="true"
              :stripe="true"
              height="635"
              @row-click="handleRowClick"
              @select="handleSelect"
              @select-all="handleSelectAll"
            >
              <el-table-column header-align="center" align="center" type="selection" />
              <el-table-column
                prop="name"
                :label="$t('equipment.name')"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="groupName"
                :label="$t('equipment.sortTitle')"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column prop="resolution" :label="$t('equipment.resolving')" header-align="center" align="center" :show-overflow-tooltip="true" />
              <el-table-column prop="online" :label="$t('program.status')" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.online == '0'" type="danger">{{ $t('equipment.isUnderline') }}</el-tag>
                  <el-tag v-if="scope.row.online == '1'" type="success">{{ $t('equipment.isOnline') }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { listDevice as deviceList } from '@/api/ips/device'
import { groupTree } from '@/api/ips/group'
import { idxOf } from '@/utils/obj-util'

export default {
  name: 'Step3',
  model: {
    prop: 'selectedDeviceList',
    event: 'vmu'
  },
  props: {
    selectedDeviceList: {
      type: Array,
      default: () => []
    },
    step: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      params: {
        name: '',
        playMode: '1',
        current: 1,
        size: 1000
      },
      deviceList: [],
      loading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 过滤分组用
      name: '',
      groupOptions: []
    }
  },
  computed: {
    selectedList: {
      get() {
        return this.selectedDeviceList
      },
      set(val) {
        this.$emit('vmu', val)
      }
    }
  },
  watch: {
    // 根据名称筛选分组名称树
    name(val) {
      this.$refs.dtree.filter(val)
    },
    deviceList: {
      deep: true,
      immediate: true,
      handler: function(val) {
        if (val && val.length) {
          setTimeout(() => {
            for (let i = 0; i < val.length; i++) {
              for (let p = 0; p < this.selectedList.length; p++) {
                if (this.selectedList[p].id === val[i].id) {
                  this.$refs.deviceTable.toggleRowSelection(val[i])
                  break
                }
              }
            }
          }, 0)
        }
      }
    }
  },
  created() {
    this.getList()
    this.getGroupTree()
  },
  methods: {
    /** 查询分组名称下拉树结构 */
    getGroupTree() {
      groupTree().then(response => {
        this.groupOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.params.fullPathId = (data.id === 0 ? null : data.id)
      this.getList()
    },
    /** 取消选择表格的一行 */
    removeSelection(idx) {
      this.$refs.deviceTable.toggleRowSelection(this.selectedList[idx])
      this.selectedList.splice(idx, 1)
    },
    /** 点击搜索按钮触发 */
    handleSearch() {
      this.getList()
    },
    /** 点击清空按钮触发 */
    handleClear() {
      this.params = {
        name: '',
        playMode: '1',
        current: 1,
        size: 1000
      }
      this.getList()
    },
    /** 新增、编辑dialog关闭调用 */
    reset() {
      if (this.$refs.deviceTable) {
        this.$refs.deviceTable.clearSelection()
      }
    },
    /** 查询设备列表 */
    getList() {
      deviceList(this.params)
        .then((res) => {
          this.deviceList = res.data
        })
        .catch(() => {
        })
    },
    /** 点击刷新按钮触发 */
    refresh() {
      this.getList()
    },
    /** 点击表格行 */
    handleRowClick(row, column, event) {
      const idx = idxOf(this.selectedList, row, 'id')
      if (idx === -1) {
        this.selectedList.push(row)
      } else {
        this.selectedList.splice(idx, 1)
      }
      this.$refs.deviceTable.toggleRowSelection(row)
    },
    /** 选择表格行 */
    handleSelect(selection, row) {
      if (selection.indexOf(row) === -1) { // 是取消
        const idx = idxOf(this.selectedList, row, 'id')
        if (idx !== -1) {
          this.selectedList.splice(idx, 1)
        }
      } else { // 是新增
        const temp = {
          id: row.id,
          name: row.name,
          code: row.code,
          groupId: row.groupId,
          groupName: row.groupName,
          resolution: row.resolution,
          platFlag: row.platFlag,
          status: row.status,
          online: row.online
        }
        this.selectedList.push(temp)
      }
    },
    /** 全选 */
    handleSelectAll(selection) {
      if (selection.length) {
        for (let i = 0; i < selection.length; i++) {
          const index = idxOf(this.selectedList, selection[i], 'id')
          if (index === -1) {
            const row = selection[i]
            const temp = {
              id: row.id,
              name: row.name,
              code: row.code,
              groupId: row.groupId,
              groupName: row.groupName,
              resolution: row.resolution,
              platFlag: row.platFlag,
              status: row.status,
              online: row.online
            }
            this.selectedList.push(temp)
          }
        }
      } else {
        for (let i = 0; i < this.deviceList.length; i++) {
          const index = idxOf(this.selectedList, this.deviceList[i], 'id')
          this.selectedList.splice(index, 1)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .table-wrapper {
    &:after {
      content: '';
      display: block;
      clear: both;
    }

    > .group {
      float: left;
      width: 200px;
    }

    > .right-wrap {
      float: left;
      width: calc(100% - 208px);
      margin-left: 8px;
    }
  }

  .btns-col {
    .el-button {
      margin-left: 8px;
      margin-top: 2px;
    }
  }
</style>
